<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --text-primary: #1b1b1b;
        --background-primary: #fff;
      }
    </style>
    <style>
      /* Legacy css to support existing live samples */
      body {
        padding: 0;
        margin: 0;
      }

      svg:not(:root) {
        display: block;
      }

      .playable-code {
        background-color: #f4f7f8;
        border: none;
        border-left: 6px solid #558abb;
        border-width: medium medium medium 6px;
        color: #4d4e53;
        height: 100px;
        width: 90%;
        padding: 10px 10px 0;
      }

      .playable-canvas {
        border: 1px solid #4d4e53;
        border-radius: 2px;
      }

      .playable-buttons {
        text-align: right;
        width: 90%;
        padding: 5px 10px 5px 26px;
      }
    </style>
  </head>

  <body>
    <template id="my-component-template">
      <style>
        :root {
          display: block;
          /* Styles applied to the host element <my-component> */
          border: 1px solid blue;
          padding: 10px;
        }

        div {
          color: red;
          /* Styles applied to the div inside the shadow DOM */
        }
      </style>
      <div>Hello from inside the component!</div>
    </template>

    <script defer>
      class MyComponent extends HTMLElement {
        constructor() {
          super();
          const shadowRoot = this.attachShadow({ mode: "closed" });
          const template = document.getElementById("my-component-template");
          shadowRoot.appendChild(template.content.cloneNode(true));
        }
      }
      customElements.define("my-component", MyComponent);
    </script>

    <my-component></my-component>
    ////////////////////////////////////////////////
    <div id="host"></div>

    <span>I'm not in the shadow DOM</span>
    <button onclick="replaceHostStyle()">replaceHostStyle</button>
    <script>
      const sheet = new CSSStyleSheet();
      function replaceHostStyle() {
        sheet.replace("span { color: red; border: 2px dotted black;}");
      }

      const host = document.querySelector("#host");

      // 创建 ShadowRoot
      const shadow = host.attachShadow({ mode: "open" });
      shadow.adoptedStyleSheets = [sheet];

      const span = document.createElement("span");
      span.textContent = "I'm in the shadow DOM";
      shadow.appendChild(span);
    </script>
  </body>
</html>
